import { defineComponent } from 'vue';
import RatioOne from './ratio_one.svg';

/**
 * 图片预览操作按钮
 */
export default defineComponent({
  name: 'ImagePreviewOperations',
  props: {
    isFitContain: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['zoom-in', 'zoom-out', 'toggle-fit', 'rotate-left', 'rotate-right'],
  setup(props, ctx) {
    const { emit } = ctx;
    return () => (
      <div class='t-image-preview__operations flex flex-center q-px-md q-py-sm'>
        {/* 放大 */}
        <div
          className='operation-btn-icon q-mx-sm'
          onClickCapture={(e) => emit('zoom-in', e)}
        >
          <t-icon name='zoom_in' size='32px'></t-icon>
        </div>
        {/* 缩小 */}
        <div
          className='operation-btn-icon q-mx-sm'
          onClickCapture={(e) => emit('zoom-out', e)}
        >
          <t-icon name='zoom_out' size='32px'></t-icon>
        </div>

        {/* 比例 */}
        <div
          className='operation-btn-icon q-mx-sm'
          onClickCapture={(e) => emit('toggle-fit', e)}
        >
          {props.isFitContain ? (
            <t-icon name='crop_free' size='32px'></t-icon>
          ) : (
            <RatioOne style={{ width: '32px', height: '32px' }} />
          )}
        </div>

        {/* 左翻转 */}
        <div
          className='operation-btn-icon q-mx-sm'
          onClickCapture={(e) => emit('rotate-left', e)}
        >
          <t-icon name='rotate_left' size='32px'></t-icon>
        </div>
        {/* 右翻转 */}
        <div
          className='operation-btn-icon q-mx-sm'
          onClickCapture={(e) => emit('rotate-right', e)}
        >
          <t-icon name='rotate_right' size='32px'></t-icon>
        </div>
      </div>
    );
  },
});
